:root {
  --ep-screen-max-width: 100vw;
}

body {
  @apply dark:bg-slate-900;
}

@screen 2xl {
  :root {
    --ep-screen-max-width: theme('screens.2xl');
  }
}

a {
  @apply font-medium decoration-inherit text-[var(--el-color-primary)];
}

p {
  @apply my-4;
}

.container {
  @apply my-0 mx-auto <2xl:max-w-full 2xl:max-w-screen-2xl;
}
.navbar {
  @apply border-b fixed w-full z-10 bg-white dark:bg-slate-900;
  .container {
    @apply flex justify-between items-center;
    .logo {
      width: 128px;
    }
    .content {
      @apply flex justify-end items-center flex-grow;
      .el-menu--horizontal {
        @apply border-b-[var(--el-border-color)] mt-[1px] dark:bg-transparent;
        & > .el-menu-item {
          @apply dark:text-gray-300;
          &:focus {
            @apply bg-inherit;
          }
          &:hover {
            @apply bg-inherit;
            color: var(--el-color-primary);
          }
        }
      }
      & > a {
        @apply dark:text-light-300 p-[15px_20px] text-[var(--el-text-color-primary)];
      }
      .is-dark {
        @apply border-transparent bg-transparent dark:text-light-300 hover:text-inherit hover:bg-inherit focus:text-inherit focus:bg-inherit;
      }
    }
  }
}

.markdown {
  @apply pt-15 pl-335px pr-0 pb-0 h-screen dark:text-gray-300/80;

  *:focus-visible {
    outline: none;
  }

  /*   & > .el-scrollbar > .el-scrollbar__bar.is-vertical {
    right: -20px;
  } */

  strong {
    @apply dark:text-gray-300;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply flex items-center relative font-semibold text-[var(--el-text-color-regular)] dark:text-gray-100/85;
    &:first-child {
      @apply mt-0;
    }
    &:hover,
    &:focus {
      .header-anchor {
        opacity: 1;
      }
    }
  }

  h1 {
    @apply mb-8 text-4xl;
  }

  h2 {
    @apply mt-9 mb-5 pb-[0.3rem] leading-tight text-3xl;
  }

  a {
    @apply inline-flex items-center;
    &.header-anchor {
      @apply absolute mt-[0.125em] -ml-[0.875em] pr-[0.23em] opacity-0;
      color: var(--el-color-primary);
    }
  }

  .text-sm,
  [text~='sm'] {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  code {
    @apply m-0 rounded py-0.6 px-2 text-sm;
    font-family: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
    color: var(--el-text-color-primary);
    background-color: var(--el-fill-color-light);
  }

  .custom-block.tip {
    @apply px-4 py-2 my-5 bg-[rgba(var(--el-color-primary-rgb),.1)] bg-opacity-30 rounded border-l border-l-5 border-l-[var(--el-color-primary)];
    .custom-block-title {
      @apply font-bold;
    }
    p {
      font-size: 0.9rem;
      &:last-child {
        @apply m-0;
      }
    }
  }
}

.toc-content {
  @apply sticky mt-0 mb-8 px-1 pt-2 pb-3 top-15;
  .heading {
    font-size: 13px;
    font-weight: 600;
    margin-top: 0;
    text-transform: uppercase;
  }
  .toc-items {
    @apply list-none p-0 mt-3 mx-0 mb-0 leading-snug;
    .toc-item {
      @apply mt-2.5 text-sm text-ellipsis relative text-inherit whitespace-nowrap;
      &.active {
        &::before {
          @apply content-[''] w-2px h-15px bg-[var(--el-color-primary)] absolute top-1 -left-7px rounded;
        }
        & > .toc-link {
          color: var(--el-color-primary);
        }
      }
      .toc-link {
        position: relative;
        color: var(--el-text-color-secondary);
        transition: color 0.3s;
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
  }
}
